.orders-page {
  background-color: #EAEDED;
  min-height: 100vh;

  .page-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;

    .page-nav {
      margin-bottom: 14px;

      .breadcrumb {
        font-size: 12px;
        color: #565959;

        :deep(.el-breadcrumb__item) {
          .el-breadcrumb__inner {
            color: #565959;
            font-weight: normal;

            &:hover {
              color: #c45500;
            }
          }
        }

        i {
          margin-right: 4px;
          font-size: 10px;
        }
      }
    }

    .main-card {
      background: #fff;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 1px 4px rgba(0,0,0,.15);

      .page-title {
        font-size: 28px;
        line-height: 36px;
        font-weight: 400;
        color: #0F1111;
        margin-bottom: 20px;
      }

      .filter-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 -20px 20px;
        padding: 0 20px;
        border-bottom: none;

        .el-tabs {
          :deep(.el-tabs__header) {
            margin-bottom: 0;
          }

          :deep(.el-tabs__nav-wrap) {
            &::after {
              height: 1px;
              background-color: #DDD;
              bottom: 0;
            }
          }

          :deep(.el-tabs__nav-scroll) {
            overflow-x: auto;
            overflow-y: hidden;

            // 隐藏滚动条但保持功能
            &::-webkit-scrollbar {
              display: none;
            }
            -ms-overflow-style: none;  // IE and Edge
            scrollbar-width: none;     // Firefox
          }

          :deep(.el-tabs__nav) {
            white-space: nowrap;
            float: none;
          }

          :deep(.el-tabs__item) {
            height: 44px;
            line-height: 44px;
            font-size: 14px;
            color: #565959;
            padding: 0 24px;
            flex-shrink: 0;  // 防止标签被压缩

            &.is-active {
              color: #0F1111;
              font-weight: 700;
            }

            &:hover {
              color: #c45500;
            }
          }

          :deep(.el-tabs__active-bar) {
            background-color: #e77600;
            height: 3px;
          }
        }

        .search-box {
          width: 240px;
          margin: 8px 0;

          :deep(.el-input__wrapper) {
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 0 0 1px #888C8C;
            transition: all 0.2s;
            padding: 1px 11px;

            &:hover {
              background: #F7FAFA;
            }

            &.is-focus {
              background: #fff;
              box-shadow: 0 0 0 2px #f90, 0 0 0 3px rgba(255,153,0,.5);
            }

            .el-input__inner {
              height: 29px;
              font-size: 13px;
              color: #0F1111;

              &::placeholder {
                color: #767676;
              }
            }

            .el-input__prefix {
              color: #767676;
              font-size: 13px;
              margin-right: 6px;
            }
          }
        }
      }

      .order-list {
        .order-item {
          background: #fff;
          border: 1px solid #D5D9D9;
          border-radius: 8px;
          margin-bottom: 20px;

          .order-header {
            padding: 16px 20px;
            background: #F0F2F2;
            border-bottom: 1px solid #D5D9D9;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .order-info {
              display: flex;
              gap: 30px;
              color: #565959;
              font-size: 12px;

              .order-id {
                color: #0F1111;
                font-weight: 500;
              }
            }

            .order-status {
              font-size: 13px;
              font-weight: 500;
              position: relative;
              padding-left: 16px;

              &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 8px;
                height: 8px;
                border-radius: 50%;
              }

              &.unpaid {
                color: #B12704;
                &::before {
                  background-color: #B12704;
                }
              }

              &.processing {
                color: #007185;
                &::before {
                  background-color: #007185;
                }
              }

              &.completed {
                color: #067D62;
                &::before {
                  background-color: #067D62;
                }
              }

              &.refunded {
                color: #565959;
                &::before {
                  background-color: #565959;
                }
              }

              &.commission {
                color: #c45500;
                &::before {
                  background-color: #c45500;
                }
              }

              &.cancelled {
                color: #565959;
                &::before {
                  background-color: #565959;
                }
              }
            }
          }

          .order-content {
            padding: 20px;

            .product-list {
              .product-item {
                display: flex;
                padding: 16px 0;
                border-bottom: 1px solid #DDD;

            &:last-child {
              border-bottom: none;
            }

                .product-image {
                  width: 100px;
                  height: 100px;
                  object-fit: contain;
                  margin-right: 16px;
                }

            .product-info {
              flex: 1;

                  .product-name {
                    font-size: 14px;
                    color: #007185;
                    margin-bottom: 8px;
                    line-height: 20px;

                    &:hover {
                      color: #c45500;
                      text-decoration: underline;
                    }
                  }

                  .product-price {
                    color: #565959;
                    font-size: 12px;

                    .price {
                      color: #0F1111;
                      font-size: 14px;
                      font-weight: 700;
                    }
                  }
                }
              }
            }

            .order-summary {
              display: flex;
              //justify-content: space-between;
              align-items: flex-end;
              padding: 16px 0 0;
              margin-top: 16px;
              border-top: 1px solid #DDD;

              .total-info {
                color: #565959;
                font-size: 12px;

                .total-price {
                  margin-top: 4px;

                  span {
                    color: #0F1111;
                    font-size: 18px;
                    font-weight: 700;
                  }
                  .original-price {
                    color: #999;
                    text-decoration: line-through;
                    font-size: 14px;
                  }
                }
              }

              .order-actions {
                margin-left: 30px;
                .el-button {
                  border-radius: 8px;
                  font-size: 13px;
                  height: 32px;
                  padding: 0 16px;

                  &--default {
                    background: #FFF;
                    border-color: #D5D9D9;
                    color: #0F1111;
                    box-shadow: 0 2px 5px rgba(15,17,17,.15);

                    &:hover {
                      background: #F7FAFA;
                    }
                  }

                  &--primary {
                    background: #FFD814;
                    border-color: #FCD200;
                    color: #0F1111;
                    box-shadow: 0 2px 5px rgba(15,17,17,.15);

                    &:hover {
                      background: #F7CA00;
                    }
                  }
                  &.is-disabled{
                    background: #F0F2F2;
                    border-color: #F0F2F2;
                  }
                }
              }
            }
          }
        }
      }

      .pagination-wrapper {
        margin-top: 30px;
        display: flex;
        justify-content: center;

        :deep(.el-pagination) {
          .el-pagination__total {
            color: #565959;
            font-size: 13px;
          }

          .el-pagination__sizes {
            .el-select {
              .el-input {
                font-size: 13px;
              }
            }
          }

          button {
            background: none;
            border: 1px solid #D5D9D9;
            border-radius: 8px;
            color: #0F1111;
            font-size: 13px;

            &:hover:not([disabled]) {
              color: #c45500;
              border-color: #c45500;
            }

            &[disabled] {
              background: #F0F2F2;
              color: #565959;
            }
          }

          .el-pager {
            li {
              border: 1px solid #D5D9D9;
              border-radius: 8px;
              font-size: 13px;
              color: #0F1111;
              margin: 0 4px;

              &.active {
                background: #FFF;
                border-color: #c45500;
                color: #c45500;
                font-weight: normal;
              }

              &:hover:not(.active) {
                color: #c45500;
                border-color: #c45500;
              }
            }
          }
        }
      }
    }
  }
}

// 移动端适配
@media screen and (max-width: 768px) {
  .orders-page {
    .page-content {
      padding: 12px;

      .main-card {
        padding: 16px;
        border-radius: 0;

        .page-title {
          font-size: 24px;
        }

        .filter-bar {
          flex-direction: column;
          align-items: stretch;

          .el-tabs {
            :deep(.el-tabs__header) {
              margin: 0;
              padding: 0 16px;
            }

            :deep(.el-tabs__nav-scroll) {
              padding-bottom: 4px;  // 防止出现滚动条
            }

            :deep(.el-tabs__item) {
              padding: 0 16px;
              font-size: 13px;
            }
          }

          .search-box {
            margin: 12px 16px;
            width: auto;
          }
        }

        .order-item {
          .order-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
          }

          .order-content {
            .order-summary {
              flex-direction: column;
              align-items: center;
              gap: 12px;

              .total-info {
                text-align: center;
              }

              .order-actions {
                width: 100%;
                display: flex;
                justify-content: center;

                .el-button {
                  min-width: 140px;
                }
              }
            }
          }
        }
      }
    }
  }

  .order-header {
    .order-info {
      gap: 20px;
    }

    .order-status {
      font-size: 12px;
      padding-left: 14px;

      &::before {
        width: 6px;
        height: 6px;
      }
    }
  }
}
